<template>
  <page-view class="page-view" :title="false">
    <div slot="headerContent">
      <a-breadcrumb class="s-breadcrumb">
        <a-breadcrumb-item>考勤管理</a-breadcrumb-item>
        <a-breadcrumb-item><nuxt-link to="/attendance/AttendanceIndex">出勤记录</nuxt-link></a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 查询和其他操作 -->
    <a-card class="s-card">
      <div class="filter">
        <a-form>
          <a-row>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="部门">
                <a-select v-model="listQuery.deptId" placeholder="请选择">
                  <a-select-option
                    v-for="item in departmentList"
                    :key="item.deptId"
                    :value="item.deptId"
                  >
                    {{ item.deptName }}
                  </a-select-option>

                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="月份">
                <a-month-picker
                  v-model="listQuery.selectedMonth"
                  :allow-clear="false"
                  placeholder="请选择"
                  @change="onChangeMonth"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24" />
          </a-row>
          <a-row>

            <a-col :lg="16" :md="12" :sm="24">
              <a-form-item label="职工姓名">
                <a-input
                  v-model="listQuery.name"
                  clearable
                  class="filter-item"
                  placeholder="请输入职工姓名"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8" :xs="0">
              <a-button
                type="primary"
                @click="handleFilter"
              >查找
              </a-button>
              <a-button @click="handleReset">重置</a-button>
              <!--              <a-button :loading="downloadLoading" class="filter-item" type="primary" @click="handleDownload">导出</a-button>-->

            </a-col>
          </a-row>
          <!-- 适配小屏幕 -->
          <a-row>
            <a-col :lg="0" :md="12" :sm="24">
              <a-button
                type="primary"
                @click="handleFilter"
              >查找
              </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <!-- 查询结果 -->
        <a-table
          :loading="listLoading"
          class="s-table"
          :data-source="list"
          :row-key="record => record.id"
          :locale="{ emptyText: '无符合筛选条件的筛选项，请重新筛选！' }"
          :pagination="false"
          :scroll="{ x: 4000, y: 500 }"
        >
          <a-table-column
            title="姓名"
            data-index="name"
            align="center"
            class="tdwidth"
            fixed="left"
          />
          <a-table-column
            title="工号"
            data-index="jobNumber"
            align="center"
            class="tdwidth"
            fixed="left"
          />
          <a-table-column
            v-for="(item, index) in details"
            :key="index"
            :title="item"
            align="center"
          >
            <template>
              暂无
            </template>
          </a-table-column>

        </a-table>
        <!-- 分页器 -->
        <div class="pagination-container">
          <a-pagination
            :page-size="listQuery.pageSize"
            :show-total="total => `共 ${total} 条记录 第 ${listQuery.page} / ${Math.ceil(total / listQuery.pageSize)} 页`"
            :current="listQuery.page"
            :total="total"
            hide-on-single-page
            show-quick-jumper
            @change="getList"
          />
        </div>
      </div>
    </a-card>
  </page-view>
</template>
<style lang="less" scoped>
  .index-td{
    width: 70px;
  }
  .textarea-td{
    width: 31%;
  }
  /deep/ .ant-table-fixed-left table, .ant-table-fixed-right table {
    width: 100%;
    background: #fff;
  }
  /deep/ .tdwidth{
    width:80px;
  }
</style>
<script>
import { STable, PageView } from '@/components'
import { del } from '@/pages/staff/api/staff'
import { mapState } from 'vuex'

export default {
  name: 'AttendanceIndex',
  components: {
    STable,
    PageView
  },
  async fetch ({ app, store }) {
    if (!app.$get(store, 'state.basic.deptList.length')) app.$departmentListFunc()
  },
  data () {
    return {
      url: '/admin/staff/page',
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        name: undefined,
        deptId: undefined,
        page: 1,
        pageSize: 20
      },
      downloadLoading: false,
      details: []
    }
  },
  computed: {
    ...mapState({
      departmentList: state => state.basic.deptList,
      deptMaps: state => state.basic.deptMaps
    })
  },
  mounted () {
    this.listQuery.selectedMonth = this.$moment()
    const dateString = this.$moment().format('YYYY-MM')
    this.getEveryDay(dateString.split('-')[1] - 0, dateString.split('-')[0] - 0)
    this.getList()
  },
  methods: {
    getList (page) {
      this.listQuery.page = page || this.listQuery.page
      this.$fetchList()
    },
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
    },
    handleReset () {
      this.listQuery = {
        page: 1,
        pageSize: 20,
        selectedMonth: this.$moment()
      }
      // this.getList()
    },
    handleDownload () {
      // this.downloadLoading = true
      // import('@/vendor/Export2Excel').then(excel => {
      //   const tHeader = ['排序', '产品名称', '默认产品单价', '发布人', '发布时间', '状态']
      //   const filterVal = ['sort', 'productName', 'defaultPrice', 'publishTime', 'status']
      //   excel.export_json_to_excel2(tHeader, this.list, filterVal, '产品信息')
      //   this.downloadLoading = false
      // })
    },
    handleDelete (row) {
      this.$handleBtnClick(del, row.id, '此操作将移除该数据, 是否继续?')
    },
    handleEdit (path) {
      this.$router.push(path)
    },
    onChangeMonth (date, dateString) {
      if (dateString) {
        this.getEveryDay(dateString.split('-')[1] - 0, dateString.split('-')[0] - 0)
        this.getList()
      }
    },
    getEveryDay (year, month) {
      const date = new Date(year, month, 1)
      // 设置月份
      date.setMonth(month + 1)
      // 设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
      date.setDate(0)
      const dayArry = []
      // 获取月份的某一天
      const day = date.getDate()

      for (let i = 1; i <= day; i++) {
        date.setDate(i) // 如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
        dayArry.push(i + '(' + this.getWeekday(date.getDay()) + ')') // 选中月份的每一天和当天是星期几
      }
      console.log(dayArry)
      this.details = dayArry
    },
    getWeekday (day) {
      return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day]
    }
  }
}
</script>
